<!-- /**
 * 表单-弹层-搜索
 * @author  huarunsong 2019-02-21
 *
 * 使用键盘上的搜索按钮触发搜索事件，非实时搜索
 *
 * 父组件需要有searchCallback方法，用来做搜索后选择的回调函数
 */
 列表搜索 -->
<template>
  <section class="searchListSection" ref="searchListSection" v-show="leftbarShade">
        
        <!-- 侧滑遮罩 -->
        <div :class="[leftbarShade ? 'cover-bar cover-barshow' : 'cover-bar']" @click.stop="close()"  @touchmove.prevent>
        </div>
        <!-- 侧滑遮罩 -->

        <!-- 侧滑主体 -->
        <div :class="[leftbarShade ? 'touch-bar touch-barshow' : 'touch-bar']">

            <!-- 搜索框 -->
            <search-input :searchPrompt="searchPrompt" :searchData="searchData" :searchBtnTxt="searchBtnTxt" :searchInputEnterActive="searchInputEnterActive"></search-input>

<!--             <search-topbar @closeSearchBar="close($event)" @changeSearchValue="changeSearchValue" @clearSearchBar="clearSearchBar"></search-topbar> -->

            <section class="dialogBox dialogBoxFA">
                <section class="dialog_con">
                    <section class="dialog_list_wrapper">
                        <ul class="dialog_list itemList" >

                            <!-- 这里分了三个template 区别不一致的地方 应该是 判断用的字段不同-->
                            <!-- cusflag line_span的展示  用的 customerId -->
                            <!-- zcpzCus line_span的展示  用的 custNo -->
                            <!-- cusflag line_span的展示  用的 code -->

                            <!-- 其中 zcpzClus用于资产配置 -->
                            <!-- 其中 cusflag用于  -->
                            <!-- 最后那个 用于其他情况 -->


                            <template v-if="type=='cusflag'">
                                <li v-for="item in dataList" @click.stop="select(item, $event)" >
                                    <span class="line_span" v-if="item.customerId">{{item.customerId}}</span>
                                    <span v-if="item.customerName">{{item.customerName}}</span>
                                </li>
                            </template>

                            <template v-else-if="type=='zcpzCus'">
                                <li v-for="item in dataList" @click.stop="select(item, $event)">
                                    <span class="line_span" v-if="item.custNo">{{item.customerId}}</span>
                                    <span v-if="item.customerName">{{item.customerName}}</span>
                                </li>
                            </template>

                            <template v-else>
                                 <li v-for="item in dataList" @click.stop="select(item)">
                                    <span class="line_span" v-if="item.code">{{item.code}}</span>
                                    <span v-if="item.name">{{item.name}}</span>
                                </li>
                            </template>

                        </ul>
                        <no-data :showNoData="showNoData" :noPage="noPage" :show="show"></no-data>
                    </section>
                    
                </section>
            </section>
        </div>
  </section>
</template>

<script>
import './searchList.less';

// import searchTopbar from '@src/common/components/searchTopBar/searchTopBar'

// import tipAction from "@common/components/otherComponents/tipAction/tipAction"

import noData from '@src/common/components/noData/noData'

export default {
    name: 'searchList',
    components:{
        // searchTopbar,
        noData,

        //搜索框
        searchInput: resolve =>require(["@src/common/components/searchInput/searchInput"], resolve),
    },

    props: {
      httpUrl: String,//接口地址

      //引用弹窗的来源
      // zcpzCus -- 资产配置 表单 客户
      type: String, 
      //empNo:String //陪谈理顾
    },

    data () {
      return {

            leftbarShade:false,//控制弹层显示与隐藏
            dataList:[],
            showNoData:false,//控制暂无数据显示与隐藏
            noPage: 'noPage',
            show: 'show',

            //输入框placeholder
            searchPrompt: '请输入关键字',
            searchData: '',
            searchBtnTxt: '取消',
            searchInputEnterActive: true,
      }
    },
    //created(){
       // $('body').height('auto');
       // //获取屏幕高度并设置到body上
       // $('body').attr('height', document.documentElement.clientHeight);
    //},
    methods: {  

        //打开弹层
        open( ){

            console.log('打开弹窗')
            // if( $el ){
            //     $( $el ).show();
            // }
            // else{
                // this.$refs.searchListSection.show();
            // }
            
            this.leftbarShade = true;
            //设置body高度
            //$('body').height( $('body').attr('height') ? Number( $('body').attr('height')) : 'auto' );


            //$('.searchListSection').height( document.documentElement.clientHeight );
            //$('.searchListSection .touch-bar').height( document.documentElement.clientHeight * 0.8);
        },

        //搜索框取消按钮点击
        searchBtnActive(){
            this.close()
        },

        //关闭弹层
        close(){
            //alert( 1 );
            //var el = event.currentTarget;
            this.leftbarShade = false;
            this.dataList = [];

            this.showNoData = false;

            // $(".mui-input-clear").val("");

            //$('body').height('auto');

            // $('.searchListSection').hide();
            // $('.touch-bar input').blur();

        },

        //搜索
        // changeSearchValue(val){

        //     //此处加val.length的判断，否则安卓手机不按val为空执行
        //     if(val && val.length){
        //         this.getListData(val);
        //     }
        //     else{
        //         this.dataList = [];
        //     }
        // },
        
        //清空搜索条件
        clearSearchBar(){
            this.dataList = [];
            this.showNoData = false;
        },

        //输入框回车，请求数据
        searchEnterActive( val ){
            this.getListData( val )
        },
       
        //获取列表数据
        getListData(val){
            
            if (this.type == 'zcpzCus') {
                //资产配置时的接口的入参
                console.log('customerName', val)
                var params = {customerName: val};
            }
            else{
                //其他情况下接口的入参
                var params={code: val};   
            }

            //type == 'cusflag时'的逻辑
            // if( this.type == 'cusflag'){


            //     if(!this.empNo){
            //         // tipAction('请选择陪谈理顾！');
            //         return;
            //     }
            //     else{
            //         Object.assign(params,{empCode:this.empNo})
            //     }
            // }

            this.$axiosHttp.http({
                    url: this.httpUrl,
                    needFailCallback: true,
                    params: params //搜索条件
            }, (res) => {

                this.showNoData = false;

                this.dataList = res.data.data;

                // if(this.dataList.length){
                     
                // }

            }, null, res => {
                this.dataList = [];
                this.showNoData = true;
            })
        },

        //选中列表条目
        //触发父组件的事件 请求客户接口
        select(item, $event) {
            
            var that = this;

             // if(this.type == 'empflag'){
             //     this.$emit('selectEmp',item);
             // }
             // else if(this.type == 'cusflag'){
             //     this.$emit('selectCus',item);
             // }
             // else if(this.type == 'areaflag'){
             //     this.$emit('selectArea',item); 
             // }
             // else{
                //触发父组件的searchCallback方法
                //item是接口返回的数组中对应的这一条数据
                this.$parent.searchCallback(item);
             // }

            setTimeout( function(){
                that.close()
            }, 500)
             
        }
    }  

}
</script>

